<template>
  <div
    class="mainsec-container"
    :style="{
      background: `url(${img}) no-repeat center/cover`,
      paddingLeft: p + 'vw',
      paddingRight: p + 'vw',
    }"
  >
    <div class="main-title">企业上云</div>
    <div class="subtitle">
      顶尖服务商 <span class="line">|</span> 专业化服务
    </div>
    <div class="subtitle">
      全流程覆盖 <span class="line">|</span> 多样化产品
    </div>
    <div class="data" :style="{ right: p + 'vw' }">
      <MainSecData v-for="(item, i) in data" :key="i" :data="item" />
    </div>
  </div>
</template>

<script>
import img from "@/assets/data/exports/banner@1x.png";
import MainSecData from "./MainSecData.vue";
export default {
  components: {
    MainSecData,
  },
  props: {
    p: {
      default: 6,
    },
  },
  data() {
    return {
      img,
      data: [
        {
          title: "上云产品",
          number: 64,
          unit: "项",
        },
        {
          title: "解决方案",
          number: 5,
          unit: "个",
        },
        {
          title: "经典案例",
          number: 4,
          unit: "个",
        },
        {
          title: "服务商",
          number: 0,
          unit: "个",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.mainsec-container {
  $background-height: 308px;
  width: 100%;
  height: $background-height;
  padding: 60px;
  position: relative;
  margin-bottom: 30px;
  .main-title {
    color: white;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 60px;
  }

  .subtitle {
    color: white;
    font-size: 20px;
    margin-bottom: 20px;
    .line {
      font-size: 20px;
      font-weight: bold;
      vertical-align: 1px;
    }
  }
  .data {
    position: absolute;
    display: flex;
    bottom: 50px;
  }
}
</style>
